<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="Box">
        <div class="search">
            <div class="avatar">
                <img src="image/ava1.jpg" alt="">
                <p>孤独等待黎明~</p>
            </div>
            <div class="daohang">
                <ul>
                    <li>个人介绍</li>
                    <li>喜欢的音乐</li>
                    <li>喜欢的动漫</li>
                    <li>喜欢的生活</li>
                    <li>更换背景</li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="item">
                <div class="oneself">
                    <p>昵称: A</p>
                    <p>生日: 1月1日</p>
                    <p>爱好: 唱，跳，rap，篮球，刷最右，敲代码</p>
                </div>
            </div>
            <div class="item">
                <div class="music">
                    <img src="image/music.PNG" alt="">
                </div>
            </div>
            <div class="item">
                <div class="cartoon">
                    <ul>
                        <li>《火影忍者》</li>
                        <li>《鬼灭之刃》</li>
                        <li>《斗破苍穹》</li>
                        <li>《斗罗大陆》</li>
                        <li>《国王排名》</li>
                    </ul>
               </div>  
            </div>
            <div class="item">
                <div class="life">
                    一个人也很快乐~
                </div>
            </div>
            <div class="item">
                <div class="bj">
                    <ul>
                        <li><img src="image/bj2.jpg" alt=""></li>
                        <li><img src="image/bj3.jpg" alt=""></li>
                        <li><img src="image/bj1.jpg" alt=""></li>
                    </ul>
                </div>
            </div>
          </div>
    </div>
    <script>
        //获取元素
        var list = document.querySelector('.daohang');
        var lis = list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        var imgs = document.querySelector('.bj').querySelectorAll('img');
        //注册事件
        for(var i = 0; i < lis.length; i++){
            lis[i].setAttribute('index',i);//自定义属性
            lis[i].onclick = function (){
                 var index = this.getAttribute('index');
                 for(var i = 0; i < items.length; i++){
                     items[i].style.display = 'none';
                 }
                 //留下点击的
                 items[index].style.display = 'block';
            }
        }
        for( var i = 0; i <imgs.length; i++){
            imgs[i].onclick = function (){
                document.body.style.backgroundImage = 'url('+this.src+')';
            }
        }
    </script>
</body>
</html>